<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../lib/iconfont4/iconfont.css">
    <link rel="stylesheet" href="../css/goodsDetail.css">
    <script src="../js/jquery.js"></script>
    <script src="../js/magnifyinglas.js"></script>
    <script src="../js/layer/layer.js"></script>
    <script src="../js/fly.js"></script>
</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="box_top">
            <div class="box_top1">

                <!-- 登录 注册部分 -->
                <ul class="top_ul1">
                    <li><span>10721746</span><span>位会员的选择</span></li>
                    <li><a href="./login.html"> 登录</a></li>
                    <li><a href="./reg.html"> 注册</a></li>
                    <li>Hi: <span class="Benutzer"> </span></li>
                    <li><a href="javascript:void(0)" class="quit">退出登录</a> </li>
                </ul>
                <!-- 签到等 右边部分 -->

                <ul class="top_ul2">
                    <li><span>会员俱乐部</a></li>
                    <li class="top_li1"><a href="">签到</a></li>
                    <li class="top_li2"><a href="">我的账户 </a>
                        <span></span>
                        <ul>
                            <li><a href="#">我的订单</a></li>
                            <li><a href="#">我的存酒库</a></li>
                            <li><a href="#">我的优惠券</a></li>
                            <li><a href="#">我的收藏夹</a></li>
                        </ul>
                    </li>
                    <li class="top_li3"><a href="">手机版</a>
                        <div class="code_box">
                            <p class="p1">手机专享</p>
                            <div><img src="../images/logo/red-code.png" alt=""></div>
                            <div class="andrio_ios">
                                <p class="p2">下载也买酒客户端</p>
                                <p><a href="#"><img src="../images/logo/ios.png" alt=""></a></p>
                                <p><a href="#"><img src="../images/logo/android.png" alt=""></a></p>
                            </div>
                            <p class="p1"><a href="#">了解更多客户端优惠</a></p>
                        </div>
                    </li>
                    <li><a href="">设置勿扰</a></li>
                </ul>
            </div>
            <!-- 头部第二部分 -->
            <div class="box_top2">
                <!-- logo部分 -->
                <div class="top2_1"><a href="#"></a></div>
                <div class="top2_2"></div>
                <div class="top2_3"><a href=""><img src="../images/logo/t_Sign.gif" alt=""></a> </div>
                <!-- 输入框  购物车部分 -->
                <div class="form_div">
                    <form action="">
                        <input class="search_1" type="text" placeholder="输入您要查找的商品名称" value="">
                        <input class="search_2" type="submit" value="搜索">
                        <p class="carts_logo">
                            <a href="./carts.html"></a>
                            <span>0</span>
                        </p>
                        <p class="form_down"><a href=""></a></p>
                    </form>
                    <p><a href=""> 2018期酒在线发售 </a> <a href=""> 陈年茅台</a></p>
                </div>
            </div>
            <!-- 头部导航部分 -->
            <div class="box_top3">
                <ul class="top3_nav">
                    <li class="wine_1"><a href="#">首页</a></li>
                    <li><a href="#">超值抢购</a>|</li>
                    <li class="wine_2"><a href="#">名庄臻选</a><span></span>|</li>
                    <li><a href="#">非常大牌</a>|</li>
                    <li class="wine_3"><a href="#">香港期酒</a><span></span>|</li>
                    <li class="wine_4"><a href="#">也买严选</a><span></span>|</li>
                    <li><a href="#">清仓特卖</a>|</li>
                    <li class="wine_5"><a href="#">也买快送</a><span></span>|</li>
                </ul>
                <!-- 下拉菜单区 -->

                <div class="top3_nav1">
                    <h3><a href="#"> 选酒中心 <span></span></a></h3>
                    <div class="slideDown ">
                        <dl class="first_slidelist">
                            <dt>
                                <h4><a href="#"> 中国白酒</a><span></span></h4>
                                <p>
                                    <a href="#" class="bg_red">茅台</a>
                                    <a href="#">五粮液</a>
                                    <a href="#">洋河</a>
                                    <a href="#">红花郎</a>
                                    <a href="#" class="bg_red">陈年老酒</a>
                                    <a href="#">酱香型</a>
                                    <a href="#">贵州</a>
                                </p>
                            </dt>
                            <dd class="pushOut">
                                <ul class="line1">
                                    <li>
                                        <h5>白酒</h5>
                                        <p><a href="#">白酒特卖馆</a><a href="#">陈年老酒</a></p>
                                    </li>
                                    <li>
                                        <h5>香型</h5>
                                        <p>
                                            <a href="#">浓香型</a>
                                            <a href="#">酱香型</a>
                                            <a href="#">清香型</a>
                                            <br>
                                            <a href="#">凤香型</a>
                                            <a href="#">米香型</a>
                                            <a href="#">酱香型</a>
                                            <br>
                                            <a href="#">酱香型</a>
                                            <a href="#">酱香型</a>
                                        </p>
                                    </li>
                                    <li class="twoword">
                                        <h5>产地</h5>
                                        <p>
                                            <a href="#">贵州</a>
                                            <a href="#" class="group2">四川</a>
                                            <a href="#" class="group2">云南</a>
                                            <br>
                                            <a href="#">湖南</a>
                                            <a href="#" class="group2">北京</a>
                                            <a href="#" class="group2">天津</a>
                                            <br>
                                            <a href="#">河北</a>
                                            <a href="#" class="group2">河南</a>
                                        </p>
                                    </li>
                                    <li>
                                        <h5>价格</h5>
                                        <p>
                                            <a href="#">1-49</a>
                                            <a href="#" class="group3">50-99</a>
                                            <a href="#" class="group4">100-149</a>
                                            <br>
                                            <a href="#">150-199</a>
                                            <a href="#" class="group5">200-349</a>
                                            <a href="#" class="group5">499-888</a>
                                            <br>
                                            <a href="#">1000以上</a>
                                        </p>
                                    </li>
                                </ul>
                                <ul class="line2">
                                    <li>
                                        <h5>陈年老酒</h5>
                                        <p>
                                            <a href="#">80年代</a>
                                            <a href="#">90年代</a>
                                            <a href="#">2001年</a>
                                            <a href="#">2002年</a>
                                            <a href="#">2003年</a>
                                            <a href="#">2004年</a>
                                            <a href="#">2005年</a>
                                            <a href="#">2006年</a>
                                            <a href="#">2007年</a>
                                            <a href="#">2008年</a>
                                            <a href="#">2009年</a>
                                            <a href="#">2011年</a>
                                        </p>
                                    </li>
                                    <li>
                                        <h5>品牌</h5>
                                        <p>
                                            <a href="#">茅台</a>
                                            <a href="#">五粮液</a>
                                            <a href="#">剑南春</a>
                                            <br>
                                            <a href="#">酒鬼</a>
                                            <a href="#">水井坊</a>
                                            <a href="#">牛栏山</a>
                                            <br>
                                            <a href="#">沱牌</a>
                                            <a href="#">泸州老窖</a>
                                            <a href="#">兄弟</a>
                                            <br>
                                            <a href="#">茅台</a>
                                            <a href="#">五粮液</a>
                                            <a href="#">剑南春</a>
                                            <br>
                                            <a href="#">酒鬼</a>
                                            <a href="#">水井坊</a>
                                            <a href="#">牛栏山</a>
                                            <br>
                                            <a href="#">沱牌</a>
                                            <a href="#">泸州老窖</a>
                                            <a href="#">兄弟</a>
                                            <br>
                                            <a href="#">茅台</a>
                                            <a href="#">五粮液</a>
                                            <a href="#">剑南春</a>
                                            <br>
                                            <a href="#">酒鬼</a>
                                            <a href="#">水井坊</a>
                                            <a href="#">牛栏山</a>
                                            <br>
                                            <a href="#">沱牌</a>
                                            <a href="#">泸州老窖</a>
                                            <a href="#">兄弟</a>
                                        </p>
                                    </li>
                                </ul>
                            </dd>
                        </dl>
                        <dl>
                            <dt>
                                <h4><a href="#"> 葡萄酒</a></h4>
                                <p>
                                    <a href="#">法国</a>
                                    <a href="#">意大利</a>
                                    <a href="#">智利</a>
                                    <a href="#">干红</a>
                                    <a href="#">桃红</a>
                                    <a href="#">甜白</a>
                                    <a href="#">起泡</a>
                                    <a href="#" class="bg_red">2018期酒</a>
                                    <a href="#">列级庄</a>
                                </p>
                            </dt>
                            <dd></dd>
                        </dl>
                        <dl>
                            <dt>
                                <h4><a href="#"> 洋酒烈酒</a></h4>
                                <p>
                                    <a href="#">轩尼诗</a>
                                    <a href="#">威士忌</a>
                                    <a href="#">鸡尾酒</a>
                                    <a href="#">百利甜</a>
                                    <a href="#">干邑</a>
                                    <a href="#">白兰地</a>
                                    <a href="#">朗姆酒</a>
                                    <a href="#">伏特加</a>
                                </p>
                            </dt>
                            <dd></dd>
                        </dl>
                        <dl>
                            <dt>
                                <h4><a href="#"> 啤酒 黄酒 日韩酒</a></h4>
                                <p>
                                    <a href="#">进口啤酒</a>
                                    <a href="#">精酿黄酒</a>
                                    <a href="#">矩惠抢购</a>
                                    <a href="#">绍兴黄酒</a>
                                    <a href="#">清酒</a>
                                    <a href="#">梅酒</a>
                                    <a href="#">烧酒</a>
                                </p>
                            </dt>
                            <dd></dd>
                        </dl>
                        <dl>
                            <dt>
                                <h4><a href="#"> 酒具周边</a></h4>
                                <p>
                                    <a href="#">酒杯</a>
                                    <a href="#" class="bg_red">酒矩</a>
                                    <a href="#">酒刀</a>
                                    <a href="#">礼盒</a>
                                    <a href="#">其他酒具</a>
                                </p>
                            </dt>
                            <dd></dd>
                        </dl>
                        <dl>
                            <dt>
                                <h4><a href="#"> 一键选酒</a><span></span></h4>
                                <p>
                                    <a href="#" class="bg_red">礼盒</a>
                                    <a href="#">餐酒精选</a>
                                    <a href="#">实惠套装</a>
                                    <a href="#">权威高分酒</a>
                                    <a href="#">聚会婚庆整箱</a>
                                    <a href="#">精品闪购</a>
                                    <a href="#" class="bg_red">海淘</a>
                                    <a href="#" class="bg_red">陈酿老酒</a>
                                </p>
                            </dt>
                            <dd></dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- 中部内容区域 -->
    <section>
        <div class="content">

            <!-- 展示区 -->
            <div class="first_line">
                <a href="#">选酒中心</a><span>></span>
                <a href="#">其他</a><span>></span>
                <strong class="heissen">维莎赤霞珠干红葡萄酒6支装</strong>
            </div>
            <div class="detail">
                <!-- 展示区  左边部分 -->
                <div class="det_left">
                    <div class="small_img ">
                        <img src="../images/partone/partone21.png" alt="">
                        <div class="sm_area"></div>
                    </div>
                    <div class="big_area">
                        <img src="../images/partone/partone22.png" alt="">
                    </div>
                    <!-- 缩小图   点击转换-->
                    <div class="run_img">
                        <a href="#"></a>
                        <div>
                            <ul>
                                <li class="leftImg"><img src="../images/partone/partone21_1.png" alt=""></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                        <a href="#"></a>
                    </div>
                    <div class="good_name">商品ID:&nbsp&nbsp&nbsp&nbsp&nbsp5169076</div>
                    <div><a href="#">加关注</a></div>
                </div>
                <!-- 展示区  右边部分 -->
                <div class="det_right">
                    <p class="top_name">
                        <a href="#">组合</a> <span class="heissen">维莎赤霞珠干红葡萄酒6支装 </span>
                    </p>
                    <div class="comment">
                        <dl>
                            <dt> 商品评分: </dt>
                            <dd class="star"></dd>
                            <dd class="star top_star"></dd>
                            <dt class="comment_num"> 评论数:</dt>
                            <dd class="num_c">12</dd>
                            <dt>近期售出数</dt>
                            <dd>301</dd>
                        </dl>
                    </div>
                    <div class="msg_good">
                        促销信息: <span>商品折扣</span>整箱囤酒会场，您的私人盛宴 <a href="#">更多优惠<i></i></a>
                    </div>
                    <div class="preis">
                        <span>促销价:
                        </span>
                        <span>¥</span>
                        <span class="wieviel">299</span>
                    </div>

                    <!-- 框框部分 -->
                    <div class="good_express">
                        <!-- 配送地址 -->
                        <ul>
                            <li>配送城市:</li>
                            <li class="showCity">
                                <p class="show_C">湖南省<span></span></p>
                                <ul class="city">
                                    <li>
                                        <p></p>
                                        <p></p>
                                        <p></p>
                                        <p></p>
                                        <p></p>
                                        <p></p>
                                        <p></p>
                                        <p></p>
                                        <p></p>
                                        <p></p>
                                        <p></p>
                                        <p></p>
                                        <p></p>
                                        <p></p>
                                        <p></p>
                                        <p></p>
                                        <p></p>
                                        <p></p>

                                        <p></p>
                                        <p></p>
                                        <p></p>
                                        <p></p>
                                        <p></p>
                                        <p></p>
                                        <p></p>
                                        <p></p>
                                        <p></p>
                                        <p></p>
                                        <p></p>
                                        <p></p>
                                    </li>
                                </ul>
                            </li>
                            <li><span class="show_C">湖南省</span>有货</li>
                        </ul>
                        <!-- 输入数量 -->
                        <form>
                            <span>选择数量:</a>
                                <span class="minus"></span>
                                <input type="text" value="1" class="num_g">
                                <span class="plus"></span><span class="reserve">现货数量:</span>&nbsp&nbsp<em>20</em>
                        </form>
                        <button class="good_cart"></button>
                    </div>
                    <p>说明: 此商品暂不可用折扣券，请谅解</p>
                </div>
            </div>
            <ul class="comb_nav">
                <li><a href="#" class="bg_color">商品详情</a><span></span></li>
                <li><a href="#">用户评价</a><span></span></li>
                <li><a href="#">商品咨询</a><span></span></li>
                <li><a href="#"></a></li>
            </ul>
            <div class="comb">
                <fieldset>
                    <legend>友情提示</legend>
                    <strong>由于年份不同，酒款信息，例如：酒精度、橡木桶陈酿时间，可能会有差异。</strong>
                </fieldset>
                <h3>酒品介绍</h3>
                <p>
                    <b>类:</b><span>干红</span><br>
                    <b>产地:</b><span>法国</span><br>
                    <b>葡萄品种:</b><span>赤霞珠(Cabernet Sauvignon)</span><br>
                    <b>级别:</b><span>奥克法定地区餐酒I.G.P</span><br>
                    <b>酒精度:</b><span>13.0%</span><br>
                    <b>规格:</b><span>750ml</span><br>
                    <b>香味:</b><span>黑加仑子 胡椒 杜松子等混合香味</span><br>
                    <b>搭配菜肴:</b><span>红色肉类佳肴，如牛排、烤羊腿、红烧肉等</span><br>
                    <b>建议醒酒时间:</b><span>30分钟</span><br>
                    <b>醉”佳品尝温度:</b><span>16-18℃</span><br>
                    <b>酒品介绍:</b><span>酒色凝重，具有黑加仑子，胡椒，杜松子的混合香味。口感柔和、平衡，丹宁丰富。</span><br>
                </p>
                <h3>葡萄品种</h3>
                <div>
                    <img src="../images/parttwo/putao.jpg" alt="">
                    <span> <b>（Cabernet Sauvignon）</b> <br>
                        赤霞珠形细小，深紫色，皮极厚，肉少核多，正因为如此，
                        丹宁酸含量特高，如果酿制的时候让皮核长时间接触葡萄汁，发酵后的酒便极具长期陈放的潜能。
                        赤霞珠酒的色泽深红带紫，保存得好的陈年赤霞珠色泽转浅，成为朱红色，酒的表面与杯接触的边缘往往会呈现棕色的环状折射，
                        过旧的赤霞珠或其它红葡萄酒会变成淡棕色。 年轻的赤霞珠具有强烈的樱桃，红莓香味，收成时如果葡萄未全熟的话，
                        便会带青椒，青草，薄荷味。存放数年之后又会转为接近深色的果实如黑加仑子的味道，这个时候，果味与橡木的木味混成一体，
                        异常复杂。也有些赤霞珠带有较成熟的气息如咖啡豆，朱古力，烟草。</span>
                </div>
                <h3>产国介绍</h3>
                <div>
                    <img src="../images/parttwo/France.jpg" alt="">
                    <span> <b>（France）</b> <br>

                        在全世界所有产国中，法国不仅拥有“醉”多元的葡萄酒风格，也是生产数量“醉”繁多的精彩葡萄酒的国家，
                        同时也拥有着“醉”多的“甚佳”酒庄。即使大部分新兴葡萄酒产区不再刻意模仿法国葡萄酒，但法国仍是影响全球葡萄酒业“醉”深的地方。
                        现在全世界“醉”受欢迎的葡萄品种大多原产自法国，而且波尔多风格、勃艮第风格、罗纳河谷风格以及香槟等都仍一直是葡萄酒类型中的重要典型。
                        法国得以成为“醉”优异的葡萄酒产国并非偶然，一方面得益于深厚的葡萄酒传统，同时又有着西欧“醉”多变的自然环境，濒临大西洋和地中海，
                        靠海又深处内陆，加上阿尔卑斯山与中央高原的阻隔，南北与东西间有着巨大的自然差异。数百年来累积的经验与传统，
                        在各产区种植了“醉”适合当地环境的葡萄品种，酿造出许多具有地方风味特色的葡萄酒。特别是法国的地理位置提供了许多葡萄种植极北的临界点，
                        让法国得以生产出风格优雅均衡的葡萄酒。</span>
                </div>
            </div>


        </div>
        <!-- 右边固定栏 购物车之类 -->
        <div class="right_fixed">
            <div class="sameBox">
                <div class="box1 box_css"></div>
            </div>
            <div class="carts ">

                <a href="./carts.html">
                    <span class="cart_icon"></span>
                    <span>购物车</span>
                    <span>0</span>
                </a>

            </div>
            <div class="sameBox">
                <div class="box2 box_css"></div>
            </div>
            <div class="sameBox">
                <div class="box3 box_css"></div>
            </div>
            <div class="sameBox">
                <div class="box4 box_css"></div>
            </div>
            <div class="sameBox">
                <div class="box5 box_css"></div>
            </div>
            <div class="sameBox">
                <div class="box6 box_css"></div>
            </div>
        </div>


    </section>

</body>

</html>
<script>
    var gbObj = {};
    $(function () {
        //先确定是否登录
        function getData() {
            var versprechen = $.Deferred();  //定义一个promise对象
            //首先  不管怎样先发送ajax   
            //返回的状态是true 就执行resolve   
            $.ajax({
                url: '../../sever/isLogin.php',
                dataType: "json"
            }).then(function (res) {
                if (res.status == true) {
                    let userData = JSON.parse(localStorage.getItem("user"));
                    versprechen.resolve();
                    $(".top_ul1 a").hide();
                    $(".Benutzer").show()
                    $(".quit").show()
                    $(".Benutzer").text(userData.u_name)


                } else {
                    versprechen.reject()
                }

            })
            return versprechen;
            //每个promise的then方法 会返回一个promise对象
            //或者undefined   可以用then的链式  解决回调地狱
        }
        $(".quit").on("click", function () {
        $.ajax({
            url: "../../sever/exitLogin.php"
        }).then(function () {
            window.location = "./login.html"
        })
    })
        // 成功之后  第一个函数  ,通过id获取产品信息
        getData().then(function () {
            var good_id = window.location.search.split("?")[1].split("=")[1];

            $.ajax({
                url: '../../sever/goodlist.php',
                data: {
                    good_id
                },
                dataType: "json"
            }).then(function (res) {
                gbObj = res;
                $(".small_img img").attr("src", res.bigImg)
                $('.leftImg img').attr("src", res.imgUrl);
                $('.big_area img').attr("src", res.bigImg);
                $('.heissen').text(res.good_name);
                $('.wieviel').text(res.good_geld);
                var $i = 0
                res.good_city.forEach((ele, index) => {
                    $i++
                    $(".city p").eq($i - 1).text(ele);

                });
            })
            //没登录   第二个函数会执行   弹窗

        }, function () {
            layer.confirm("请登录", {
                icon: 3,
                btn: ['立即登录', '否']
            }, function () {
                //btn的第一个函数 对应前后的按键  进行操作
                window.location.href = "./login.html"
            }, function () {

            })
        })
    })


    //绑定事件

    $(function () {
        //城市列表显示与隐藏
        $(".showCity").on("click", function () {
            if ($(".city").css("display") == "block") {
                $(".city").hide();
            } else {
                $(".city").show();
            }
        });
        //城市名选择
        $(".city p").on('click', function () {
            var txt = $(this).html()
            console.log(txt);

            $(".show_C").text(txt)
        })
        //产品数量增减 及 存货量变化
        $(".minus").on("click", function () {
            var num = $(this).next().val()
            var num_1 = $(".reserve").next().text()

            if (num > 0) {
                $(this).next().val(--num)
                $(".reserve").next().text(++num_1)
            }

        })


        $(".plus").on("click", function () {
            var num_2 = $(this).prev().val()
            var num_3 = $(".reserve").next().text()
            console.log(num_3);
            $(this).prev().val(++num_2)
            $(".reserve").next().text(--num_3)
        })
        // $(".num_g").on("input",function(){
        //     let val=$(this).val();
        //     if(isNaN(val)){
        //         $(this).val(1)
        //     }
        // })


        $(".good_cart").on("click", function () {

            gbObj["good_city"] = $(".showCity .show_C").text();
            gbObj["good_num"] = $(".num_g").val();
            gbObj["uid"] = JSON.parse(localStorage.getItem('user')).u_name;
            console.log(gbObj);

            $.ajax({
                url: "../../sever/addcarts.php",
                type: 'post',
                data: gbObj,
                dataType: "json"
            }).then(function (res) {
                console.log(res)
            })
            $.post(
                "../../sever/addcart.php",gbObj,function(res){
                    console.log(res);
            },'json')
            return false;
        })

    })

</script>